<%--
  User: wyz
  Date: 2024/7/22
  Time: 10:20
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <title>主页</title>
  <style>
    .container{
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .left-nav{
      width: 20%;
    }
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }

    .active, .accordion:hover {
      background-color: #ccc;
    }

    .panel {
      padding: 0 30px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }

    .panel a {
      text-decoration: none;
      color: #2196F3;
      display: block;
      padding: 10px;
      border-bottom: 1px solid #e5e5e5;
      width: 100%;
    }
    .panel a:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
<div class="header">
  <h1>欢迎使用 OA 自动化办公系统</h1>
  <h5><a href="/login.jsp">注销</a></h5>
</div>
<div class="container">
  <div class="left-nav">
    <button class="accordion">个人中心</button>
    <div class="panel">
      <a href="/user/info.do">查看信息</a>
      <a href="/password.jsp">修改密码</a>
    </div>

    <button class="accordion">联系人</button>
    <div class="panel">
      <a href="/contact/list.do">查看联系人</a>
      <a href="/contactAdd.jsp">添加联系人</a>
    </div>

    <button class="accordion">短消息</button>
    <div class="panel">
      <a href="/message/list.do">查看短消息</a>
      <a href="/message/send.do">发送短消息</a>
    </div>

    <button class="accordion">个人日程</button>
    <div class="panel">
      <a href="/schedule/list.do">查看日程</a>
      <a href="/schedule/add.do">添加日程</a>
    </div>

    <button class="accordion">工作日志</button>
    <div class="panel">
      <a href="/log/list.do">查看日志</a>
      <a href="/log/add.do">添加日志</a>
    </div>

    <button class="accordion">会议公告</button>
    <div class="panel">
      <a href="/pub/list.do">查看公告</a>
      <a href="/pub/add.do">发布公告</a>
    </div>
  </div>
  <div class="right">
    <img src="/img/home.jpg" width="1200" height="600" />
  </div>
</div>
<script>
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
</script>

</body>
</html>